import React from 'react';
import { NavBar, Space } from 'antd-mobile';
import { MoreOutline } from 'antd-mobile-icons'
import { useHistory } from 'react-router-dom';
import { useDispatch } from 'react-redux'
const Mynavbar = (props) => {
    // console.log('props', props);
    const his = useHistory();
    const dispatch = useDispatch();
    // 导航右侧部分
    const right = (
        <div style={{ fontSize: 24 }}>
            <Space style={{ '--gap': '16px' }}>
                {props.righttext ? <span style={{ fontSize: '18px' }} onClick={() => {
                    // 点击退出执行的代码
                    // 步骤1:清除本地登录时设置或存储的内容
                    localStorage.removeItem('token')
                    dispatch({ type: 'setuser', payload: '' })
                    // 步骤2:跳转到首页
                    his.push('/home')
                }}>{props.righttext}</span> : <MoreOutline />}
            </Space>
        </div>
    )
    // 点击返回上一页
    const back = () => {
        his.goBack()
    }
    return (
        <NavBar back='返回' right={props.isshow ? right : null} onBack={back}>
            {props.children}
        </NavBar>
    );
}

export default Mynavbar;
